<template>
    <view style="position: relative" class="p_10">
            <view class="coupon-container m_t_20">
                <!-- 顶部标题 -->
                <!-- <view class="header">
                <text class="title">领券中心</text>
                <text class="subtitle">拼团专享优惠券</text>
              </view> -->

                <!-- 优惠券列表 -->
                <view class="coupon-list">
                    <view v-for="(item, index) in couponList" :key="index" class="coupon-item" :class="{
          'disabled': item.status !== 'available'
        }">
                        <!-- 左侧金额区域 -->
                        <view class="coupon-left">
                            <text class="amount">{{item.amount}}</text>
                            <text class="unit">元</text>
                            <text class="condition">满{{item.conditionAmount}}元可用</text>
                        </view>

                        <!-- 右侧信息区域 -->
                        <view class="coupon-right">
                            <text class="name">{{item.name}}</text>
                            <!-- <text class="time">有效期: {{item.startTime}}至{{item.endTime}}</text> -->
                            <text class="scope">适用范围: {{item.info}}</text>
                            <text class="scope">消耗积分: {{item.price}}</text>

                            <button class="get-btn" :class="{
              'disabled': item.status !== 'available'
            }" @click="handleGetCoupon(item)">
                                {{item.status === 'available' ? '立即兑换' :
                                item.status === 'received' ? '已兑换' : '已使用'}}
                            </button>
                        </view>

                        <!-- 优惠券装饰元素 -->
                        <view class="coupon-corner"></view>
                        <view class="coupon-dots">
                            <view class="dot" v-for="(dot, i) in 10" :key="i"></view>
                        </view>
                    </view>
                </view>
            </view>
    </view>
</template>
<script>
import { getByKeyApi, getGoodsCouponApi, receiveCouponApi } from "@/sheep/api";
export default {
    name: "getCoupons",
    data() {
        return {
            titleHeight: 0,
            customTop: 0,
            bgImg: 0,
            couponList: [],
        };
    },
    onLoad() {
        this.getCouponList();
    },
    methods: {
        // 获取优惠券列表
        getCouponList() {
            getGoodsCouponApi().then((res) => {
                this.couponList = res.data;
            });
        },
        // 领取优惠券
        handleGetCoupon(item) {
            if (item.status !== "available") return;
            receiveCouponApi(item.couponId).then((res) => {
                if (res.code === 200) {
                    // 领取成功
                    item.status = "received";
                    uni.showToast({
                        title: "兑换成功",
                        icon: "success",
                    });
                    this.getCouponList();
                }
            });
        },
    },
};
</script>

<style scoped lang="scss">
.custom {
    position: fixed;
    left: 40rpx;
    font-size: 40rpx;
    font-weight: bolder;
    display: flex;
    align-items: center;
    color: #ffffff;
    z-index: 999;
}
.coupons_box {
    background: #ffffff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    min-height: calc(100vh - 600rpx);
    position: relative;
    top: -20rpx;
}

.coupon-container {
    //padding: 20rpx;
    background-color: #f7f7f7;
    //min-height: 100vh;

    .header {
        padding: 30rpx 0;
        text-align: center;
        .title {
            font-size: 36rpx;
            font-weight: bold;
            display: block;
        }
        .subtitle {
            font-size: 24rpx;
            color: #999;
        }
    }

    .coupon-list {
        .coupon-item {
            position: relative;
            display: flex;
            margin-bottom: 20rpx;
            height: 180rpx;
            background: linear-gradient(to right, #ff4e4e, #ff7e7e);
            border-radius: 12rpx;
            overflow: hidden;
            color: #fff;

            &.disabled {
                background: linear-gradient(to right, #cccccc, #dddddd);
            }

            .coupon-left {
                width: 220rpx;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                border-right: 2rpx dashed rgba(255, 255, 255, 0.3);

                .amount {
                    font-size: 50rpx;
                    font-weight: bold;
                    line-height: 1;
                }

                .unit {
                    font-size: 28rpx;
                    margin-top: 10rpx;
                }

                .condition {
                    font-size: 22rpx;
                    margin-top: 10rpx;
                }
            }

            .coupon-right {
                flex: 1;
                padding: 20rpx;
                display: flex;
                flex-direction: column;

                .name {
                    font-size: 28rpx;
                    font-weight: bold;
                }

                .time,
                .scope {
                    font-size: 22rpx;
                    margin-top: 10rpx;
                    color: rgba(255, 255, 255, 0.8);
                }

                .get-btn {
                    position: absolute;
                    right: 20rpx;
                    bottom: 20rpx;
                    width: 160rpx;
                    height: 50rpx;
                    line-height: 50rpx;
                    background-color: #fff;
                    color: #ff4e4e;
                    border-radius: 25rpx;
                    font-size: 24rpx;
                    padding: 0;

                    &.disabled {
                        background-color: #dddddd;
                        color: #999;
                    }
                }
            }

            .coupon-corner {
                position: absolute;
                top: 0;
                left: 200rpx;
                width: 40rpx;
                height: 40rpx;
                background-color: #f7f7f7;
                border-radius: 0 0 40rpx 0;
            }

            .coupon-dots {
                position: absolute;
                left: 200rpx;
                top: 40rpx;
                bottom: 0;
                width: 20rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                .dot {
                    width: 8rpx;
                    height: 8rpx;
                    background-color: #f7f7f7;
                    border-radius: 50%;
                }
            }
        }
    }
}
</style>
